<template>
  <div class="index">
    <div class="content">
      <!-- <div class="notice_wrap">
        <div class="notice inner">
          <div class="notice_img">
            <img :src="require('../assets/images/notice.png')" alt="" />
          </div>
          <div class="notice_text">
            疫情期间，现场预录取的学生学校现场确认时间延迟，具体时间以后期发的短信为准。
          </div>
        </div>
      </div> -->
      <div class="title_wrap">
        <div class="title inner">
          <h3 class="title_terrace">{{ wpzswTitle }}</h3>
          <div class="title_advice">投诉或建议拨打：0996-2168236</div>
        </div>
      </div>
      <div class="banner">
        <div class="index_notice inner">
          <div class="tips">网上报名时间</div>
          <div class="time">
            {{ beginYear }}<i>年</i>{{ beginMonth }}<i>月</i>{{ beginDay
            }}<i>日</i> {{ beginHour }} <i>~</i> {{ endYear }}<i>年</i
            >{{ endMonth }}<i>月</i>{{ endDay }}<i>日</i>
            {{ endHour }}
          </div>
          <div class="operation">
            <div class="item" @click="normalApply">
              <router-link class="item" :to="{ path: '/notice' }">
                <span>中小学入学报名</span>
              </router-link>
            </div>
            <div class="item item01" @click="delayApply">
              <router-link class="item" :to="{ path: '/zmkm' }">
                <span>延缓入学登记</span>
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <div class="nav_wrap">
        <div class="inner nav">
          <div class="nav_title"><span>快速链接</span></div>
          <div class="icon-link">
            <router-link
              class="item item01"
              target="_blank"
              :to="{ path: '/notice' }"
            >
              <i class="icon icon01"><span></span></i>
              <span>招生计划</span>
            </router-link>
            <router-link class="item" target="_blank" :to="{ path: '/notice' }">
              <i class="icon icon02"><span></span></i>
              <span>招生政策</span>
            </router-link>
            <router-link class="item" target="_blank" :to="{ path: '/notice' }">
              <i class="icon icon03"><span></span></i>
              <span>操作指南</span>
            </router-link>
            <router-link class="item" target="_blank" :to="{ path: '/notice' }">
              <i class="icon icon04"><span></span></i>
              <span>学区房</span>
            </router-link>
            <router-link class="item" target="_blank" :to="{ path: '/notice' }">
              <i class="icon icon05"><span></span></i>
              <span>问题答疑</span>
            </router-link>
            <router-link class="item" target="_blank" :to="{ path: '/notice' }">
              <i class="icon icon06"><span></span></i>
              <span>幼儿园报名</span>
            </router-link>
            <router-link class="item" target="_blank" :to="{ path: '/notice' }">
              <i class="icon icon07"><span></span></i>
              <span>学区查询</span>
            </router-link>
            <router-link class="item" target="_blank" :to="{ path: '/notice' }">
              <i class="icon icon08"><span></span></i>
              <span>咨询电话</span>
            </router-link>
            <!-- <a
            href="http://rxfw.edu88.com/newsInfo.aspx?pkId=10"
            target="_blank"
            class="item"
          >
            <i class="icon icon02"></i>
            <span>操作指南</span>
          </a>
          <a
            href="http://rxfw.edu88.com/newsInfo.aspx?pkId=11"
            target="_blank"
            class="item"
          >
            <i class="icon icon04"></i>
            <span>问题答疑</span>
          </a> -->
          </div>
          <div class="code">
            <img :src="require('../assets/images/qrcode.png')" alt="" />
            <div class="qrcode" id="qrcode" ref="qrcode"></div>
          </div>
        </div>
      </div>
      <div class="parent_read">
        <div class="inner">
          <div class="nav_title"><span>家长必读</span></div>
          <div class="info" v-html="projectInfos.homeNote"></div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="inner">
        <div class="footer-content">
          <p>{{ copyRight }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import localDb from "../utils/localDb.js";
import { formatDate } from "../utils/util";
import { getSysPara, getSysZt } from "../utils/api";
import QRCode from "qrcodejs2";
export default {
  name: "Index",
  data() {
    return {
      // lotteryShow: false,
      // isDealyApply: false, //是否延缓入学
      beginYear: "",
      beginMonth: "",
      beginDay: "",
      beginHour: "",
      endYear: "",
      endMonth: "",
      endDay: "",
      endHour: "",
      copyRight: "", // 页尾版权信息
    };
  },
  created() {
    localDb.clear("3");
  },
  methods: {
    normalApply() {
      // localDb.set("delayApply", false);
      this.$store.commit("SETDELAYAPPLY", "");
    },
    delayApply() {
      localDb.set("delayApply", true);
      this.$store.commit("SETDELAYAPPLY", true);
    },
    formatDateTime(fmt, mydate) {
      return formatDate(fmt, mydate);
    },
    formatTime(timer) {
      if (timer == "regBegin") {
        let time = this.formatDateTime(
          "YYYY-MM-dd hh:mm",
          this.projectInfos.regBegin
        );
        this.beginYear = time.substring(0, 4);
        this.beginMonth = time.substring(5, 7);
        this.beginDay = time.substring(8, 10);
        this.beginHour = time.substring(11, 13) + ":" + time.substring(14, 16);
      } else if (timer == "regEnd") {
        let time = this.formatDateTime(
          "YYYY-MM-dd hh:mm",
          this.projectInfos.regEnd
        );
        this.endYear = time.substring(0, 4);
        this.endMonth = time.substring(5, 7);
        this.endDay = time.substring(8, 10);
        this.endHour = time.substring(11, 13) + ":" + time.substring(14, 16);
      }
    },
    compareDate(date) {
      let myDate = new Date(),
        time1 = myDate.getTime(), // 当前日期时间戳
        dateformat = date.replace(/T/g, " "),
        day2 = new Date(dateformat.replace(/-/g, "/")),
        time2 = day2.getTime(); //所选日期时间戳
      if (parseInt(time2) > parseInt(time1)) {
        return false;
      }
      return true;
    },
    qrCode(url) {
      let qrcode = new QRCode("qrcode", {
        width: 93, //图像宽度
        height: 92, //图像高度
        colorDark: "#000000", //前景色
        colorLight: "#ffffff", //背景色
        typeNumber: 4,
        correctLevel: QRCode.CorrectLevel.H, //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
      });
      qrcode.clear(); //清除二维码
      qrcode.makeCode(url); //生成另一个新的二维码
    },
    //获取页尾信息
    async getCopyRight(type) {
      try {
        const data = await getSysPara(type);
        if (data.res == 0) {
          this.copyRight = data.data[0].value;
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {}
    },
    //获取项目标题
    async getSysName(type) {
      try {
        const data = await getSysPara(type);
        if (data.res == 0) {
          this.$store.dispatch("setWpzswTitle", data.data[0].value);
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {}
    },
    async getSysZt() {
      try {
        const data = await getSysZt();
        if (data.res == 0) {
          localDb.set("emptyEnter", data.data);
          if (data.data.isMt != "0") {
            this.$router.push({ path: "/empty" });
          }
        }
      } catch (error) {}
    },
  },
  computed: {
    wpzswTitle() {
      return this.$store.state.wpzswTitle;
    },
    projectInfos() {
      return this.$store.state.frontPage.projectInfos;
    },
  },
  created() {
    this.getSysZt();
    localDb.clear("3");
  },
  mounted() {
    this.$store.dispatch("fetchGetProject", {
      sucCallback: () => {},
      falCallback: () => {},
    });
    this.getCopyRight("CopyRight");
    this.getSysName("SysName");
    this.formatTime("regBegin");
    this.formatTime("regEnd");
    //生成二维码
    document.getElementById("qrcode").innerHTML = "";
    this.qrCode(window.location.protocol + "//" + window.location.host);
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.index {
  min-height: 100vh;
  background: #fff;
  .inner {
    // width: 1200px;
    width: 1180px;
  }
}
.content {
  min-width: 1200px;
}
.notice_wrap {
  height: 40px;
  background-color: #f5f5f5;
  .notice {
    height: 100%;
    display: flex;
    align-items: center;
    .notice_img {
      width: 81px;
      height: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .notice_text {
      margin-left: 15px;
      color: #ff0000;
      font-size: 16px;
    }
  }
}
.title_wrap {
  .title {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title_terrace {
      font-size: 32px;
      color: #000;
      font-weight: normal;
      margin-top: -5px;
    }
    .title_advice {
      font-size: 16px;
      color: #666;
      font-family: "SourceHanSansCN-Regular";
    }
  }
}
.banner {
  width: 100%;
  height: 472px;
  background: url(~@/assets/images/banner_shouye.png) no-repeat top center;
  // background-position: 10px 0;
  // background-size: contain;
}
.index_notice {
  padding: 85px 0 0 0;
  .tips {
    color: #fff;
    font-size: 36px;
  }
  .time {
    margin-top: 10px;
    font-size: 22px;
    color: #fdf55a;
    i {
      color: #fff;
    }
  }
  .operation {
    margin-top: 39px;
    .item {
      display: inline-block;
      width: 228px;
      height: 70px;
      line-height: 70px;
      margin-right: 20px;
      text-decoration: none;
      text-align: center;
      font-weight: 700;
      background-color: #66bdfc;
      color: #fff;
      border-radius: 10px;
      font-size: 22px;
      cursor: pointer;
      &:hover {
        color: #0195ff;
        background-color: #fff;
        // box-shadow: 0 5px 10px #e2e2e2;
        box-shadow: 0 6px 0px rgba($color: #fff, $alpha: 0.3);
      }
    }
  }
}
.nav_wrap {
  padding-top: 20px;
  position: relative;
  // .nav {
  //   position: relative;
  .icon-link {
    margin-top: 30px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    .item {
      text-align: center;
      text-decoration: none;
      .icon {
        display: inline-block;
        width: 72px;
        height: 72px;
        border-radius: 24px;
        margin-bottom: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          display: inline-block;
        }
      }
      .icon01 {
        background-image: linear-gradient(135deg, #57c1ff 0%, #4983ff 100%);
        span {
          width: 50px;
          height: 38px;
          background: url(~@/assets/images/icon-zsjh.png) no-repeat center;
        }
      }
      .icon02 {
        background-image: linear-gradient(135deg, #55e6c5 0%, #0fb894 100%);
        span {
          width: 35px;
          height: 41px;
          background: url(~@/assets/images/icon-zszc.png) no-repeat center;
        }
      }
      .icon03 {
        background-image: linear-gradient(135deg, #fcdc37 0%, #f6aa02 100%);
        span {
          width: 37px;
          height: 40px;
          background: url(~@/assets/images/icon-czzn.png) no-repeat center;
        }
      }
      .icon04 {
        background-image: linear-gradient(135deg, #57c1ff 0%, #4983ff 100%);
        span {
          width: 45px;
          height: 45px;
          background: url(~@/assets/images/icon-xqt.png) no-repeat center;
        }
      }
      .icon05 {
        background-image: linear-gradient(135deg, #55e6c5 0%, #0fb894 100%);
        span {
          width: 42px;
          height: 42px;
          background: url(~@/assets/images/icon-wtdy.png) no-repeat center;
        }
      }
      .icon06 {
        background-image: linear-gradient(135deg, #ff9e57 0%, #fc6329 100%);
        span {
          width: 48px;
          height: 40px;
          background: url(~@/assets/images/icon-yey.png) no-repeat center;
        }
      }
      .icon07 {
        background-image: linear-gradient(135deg, #ff9e57 0%, #fc6329 100%);
        span {
          width: 40px;
          height: 40px;
          background: url(~@/assets/images/icon-xqcx.png) no-repeat center;
        }
      }
      .icon08 {
        background-image: linear-gradient(135deg, #fcdc37 0%, #f6aa02 100%);
        span {
          width: 39px;
          height: 40px;
          background: url(~@/assets/images/icon-zxdh.png) no-repeat center;
        }
      }
      span {
        display: block;
        font-size: 16px;
        color: #000;
        // font-family: MicrosoftYaHei;
      }
    }
  }
  .code {
    position: absolute;
    left: -235px;
    top: 0;
    .qrcode {
      position: absolute;
      left: 64px;
      top: 86px;
    }
  }
  // }
}
.parent_read {
  margin: auto;
  margin-top: 55px;
  padding-top: 30px;
  // width: 1385px;
  height: 474px;
  // height: 520px;
  background: url(~@/assets/images/bg_read.png) no-repeat center;
  // background-size: cover;
  .info {
    width: 1080px;
    margin: auto;
    padding: 30px 0 30px;
    height: 342px;
    overflow: auto;
    color: #222;
    font-size: 16px;
    line-height: 28px;
  }
}

.footer {
  margin-top: 60px;
  height: 50px;
  background-color: #0195ff;
  .footer-content {
    p {
      line-height: 50px;
      font-size: 14px;
      text-align: center;
      color: #fff;
    }
  }
}
</style>
